<template>
	<!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
	<a-drawer v-model:open="visible" ref="employeeDetailModalRef" class="edit-drawer modal-fixed-bottom"
		root-class-name="root-customer-drawer" width="800px" :closable="false" @close="onClose">
		<div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
		<div class="modal-header">{{ $t('self.systemAccount.tips9') }}</div>

		<a-tree v-model:expandedKeys="treeConfig.expandedKeys" v-model:selectedKeys="treeConfig.selectedKeys"
			v-model:checkedKeys="treeConfig.checkedKeys" checkable :field-names="treeConfig.fieldNames"
			:tree-data="treeConfig.treeData">
			<!--      <template #title="{ title, key }">-->
			<!--        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>-->
			<!--        <template v-else>{{ title }}</template>-->
			<!--      </template>-->
		</a-tree>

		<div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
			<a-button type="primary" @click="onSubmit">{{ $t('self.submitButton') }}</a-button>
			<a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
		</div>

	</a-drawer>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref,
		watch
	} from 'vue'
	import {
		message
	} from 'ant-design-vue'
	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $T = proxy.$t
	const $API = proxy.$API
	const $HTTP = proxy.$HTTP
	const $CONFIG = proxy.$CONFIG
	const emit = defineEmits(['close', 'ok'])

	const visible = ref(false)
	// 模式，add新增，show查看，edit编辑
	const mode = ref('add')
	const treeConfig = ref({
		expandedKeys: [],
		selectedKeys: [],
		checkedKeys: [],
		fieldNames: {
			children: 'children',
			title: 'title',
			key: 'id'
		},
		treeData: []
	})
	const formState = ref({
		"id": 0,
		"roleName": "",
		"mark": "",
		"orgId": null,
		"status": 1,
		"orgName": ""
	})

	onMounted(() => {
		// searchOrgOptions.value = await proxy.getOrgSelectList(true)
	})

	watch(
		() => treeConfig.value.expandedKeys,
		(curr, old) => {
			console.log('expandedKeys', curr);
		}
	)
	watch(
		() => treeConfig.value.selectedKeys,
		(curr, old) => {
			console.log('selectedKeys', curr);
		}
	)
	watch(
		() => treeConfig.value.checkedKeys,
		(curr, old) => {
			// console.log('checkedKeys', curr);
		}
	)


	// =========start 设置权限
	// 获取菜单列表
	const getMenuList = () => {
		$HTTP.post($CONFIG.API_URL + '/admin/menuRoleTree?roleId=' + formState.value.id, {}).then(res => {
			treeConfig.value.treeData = res
			treeConfig.value.checkedKeys = $TOOL.array.getCheckedKeysByTree(res)
			//console.log('选中的菜单ID', treeConfig.value.checkedKeys)
		}).catch(res => {
			// 由于后端接口没有code，只能在catch里面捕捉
			treeConfig.value.treeData = res
			treeConfig.value.checkedKeys = $TOOL.array.getCheckedKeysByTree(res)
			//console.log('选中的菜单ID', treeConfig.value.checkedKeys)
		})
	}

	const onSubmit = (values) => {
		const params = {
			roleId: formState.value.id,
			menuIds: treeConfig.value.checkedKeys.join(",")
		}
		$API.backend.systemAccount.savaMenuRoleAuth.post(params).then(res => {
			message.success($T('self.message.success'))
			onReset()
			visible.value = false
			emit('ok')
		}).catch(err => {
			message.error($T('self.message.error'))
		})

	};

	const onReset = () => {
		// 清空内容
		formState.value = {
			"id": 0,
			"roleName": "",
			"mark": "",
			"orgId": null,
			"status": 1,
			"orgName": ""
		}
	}

	const onClose = () => {
		onReset()
		visible.value = false
		emit('close')
	}

	const edit = (record) => {
		mode.value = 'edit'
		visible.value = true
		formState.value = record
		getMenuList()
		// detail.value = record
		// $TOOL.array.cloneExistKey(formState.value, detail.value)
		// console.log(formState.value)
	}

	// 子组件中要通过defineExpose将方法暴露给父组件
	defineExpose({
		edit,
	})
</script>

<style lang="scss" scoped>
	.edit-drawer {
		position: relative;

		.closeable {
			@include closeable;
		}
	}
</style>